<template>
  <div>
    <div
      id="device-trajectory"
      style="height: calc(100vh - 200px); width: 100%; overflow: hidden;"
    />
  </div>
</template>

<script>
import { listDeviceLocal } from '@/api/iot/iotDeviceLocalApi'
import { makeMap, makeMarket } from '@/util/mapTool'

let map = null
export default {
  name: 'LocalMap',
  props: {
    deviceCore: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      map: null
    }
  },
  destroyed() {
    map.destroy()
    map = null
  },
  mounted() {
    this.listDeviceLocal()
  },
  methods: {
    listDeviceLocal() {
      listDeviceLocal({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.initChart(data)
        }
      })
    },
    initChart(data) {
      if (!data || data.length <= 0) {
        return
      }
      const one = data[0]
      map = makeMap(document.getElementById('device-trajectory'), one.lat, one.lng)
      data.forEach(item => {
        makeMarket(map, item.lat, item.lng)
      })
    }
  }
}
</script>
